<template>
  <div class="AfterSaleDetails">
    <!-- //表单操作 -->
    <a-card>
      <a-form>
        <a-form-item label="售后编号" :label-col="{ span: 2}" :wrapper-col="{ span: 16}">
          <!-- <span>5048994163163104216</span> -->
          <span>{{returnCode}}</span>
        </a-form-item>
        <a-form-item label="订单编号" :label-col="{ span: 2}" :wrapper-col="{ span: 16}">
          <span>{{orderCode}}</span>
        </a-form-item>
        <a-form-item label="绑定手机号码" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>187 0000 0000</span>
        </a-form-item>
        <a-form-item label="订单金额" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{orderAmount}}</span>
        </a-form-item>
        <a-form-item label="退款金额" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{requiredReturnMoney}}</span>
        </a-form-item>
        <a-form-item label="实际退款金额" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{actualReturnMoney}}</span>
        </a-form-item>
        <a-form-item label="客户退款原因" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{questionDesc}}</span>
        </a-form-item>
        <a-form-item label="实际退款原因" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>-</span>
        </a-form-item>
        <a-form-item label="退款状态" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{statusName}}</span>
        </a-form-item>
        <a-form-item label="退款商品" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{goodsReturnDetailsList}}</span>
        </a-form-item>
        <a-form-item label="申请时间" :label-col="{ span: 2 }" :wrapper-col="{ span: 16}">
          <span>{{createDate}}</span>
        </a-form-item>
      </a-form>
    </a-card>
    <!-- 表单操作 -->

    <!-- 表格操作 -->
    <a-card style="margin-top:2%;height:600px;">
      <div class="popForm">
        <ul>
          <li>第一层</li>
          <li>第二层</li>
          <li>第三层</li>
          <li>第四层</li>
        </ul>
        <p>上货前图片：</p>
        <ul>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
        </ul>
        <p>上货后图片：</p>
        <ul>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
          <li>
            <img src="../../assets/占位图.jpg" alt="图片加载不成功">
          </li>
        </ul>
      </div>
    </a-card>
    <!-- 表格操作 -->
  </div>
</template>

<script>
export default {
  name: "AfterSaleDetails",
  data() {
    return {
      returnCode: "",
      orderCode: "",
      orderAmount: "",
      requiredReturnMoney: "",
      actualReturnMoney: "",
      questionDesc: "",
      statusName: "",
      goodsReturnDetailsList: "",
      createDate: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 售后订单详情
    getAgentBackendGoodsReturn() {
      this.axios({
        method: "post",
        url: this.baseUrl + "/order/getAgentBackendGoodsReturn",
        data: {
          loginToken: this.$store.state.loginToken,
          goodsReturnId: this.$store.state.goodsReturnId,
        }
      }).then(res => {
        this.returnCode = res.data.data.returnCode;
        this.orderCode = res.data.data.orderCode;
        this.orderAmount = res.data.data.orderAmount;
        this.requiredReturnMoney = res.data.data.requiredReturnMoney;
        this.actualReturnMoney = res.data.data.actualReturnMoney;
        this.questionDesc = res.data.data.questionDesc;
        this.statusName = res.data.data.statusName;
        this.goodsReturnDetailsList = res.data.data.goodsReturnDetailsList;
        this.createDate = res.data.data.createDate;
      });
    }
  },
  created() {
    this.getAgentBackendGoodsReturn();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AfterSaleDetails {
  width: 100%;
}
.popForm {
  padding: 0 1%;
}
.popForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popForm img {
  width: 100%;
}
.popForm p {
  margin: 1% 0;
}
</style>
